// @ts-nocheck
// 手机验证
import tel from '@/assets/tel_g.png';
import CodeModal from '@/pages/Login/components/CodeModal';
import { addMobileAuth, getCaptcha, getCaptchaToken } from '@/services/login';
import { phoneFormatter } from '@/utils';
import { numberPattern } from '@/utils/common';
import { Button, Col, Form, Input, Modal, Space, message } from 'antd';
import { debounce } from 'lodash';
import { useEffect, useRef, useState } from 'react';
import ReactSimpleVerify from 'react-simple-verify';
import 'react-simple-verify/dist/react-simple-verify.css';
import { useIntl } from 'umi';

let timer = null;
type Props = {
  visible: boolean;
  handleOk: () => void;
};
const PhoneVerifyModal: React.FC<Props> = ({ visible, handleOk }) => {
  const intl = useIntl();
  const verify = useRef();
  const [codeModalvisible, setCodeModalvisible] = useState(false);
  const [form] = Form.useForm();
  const phone = form.getFieldValue('phone');
  //   phone的token
  const [phoneToken, setPhoneToken] = useState('');

  const [index, setIndex] = useState(0);
  const [count, setCount] = useState(0);

  useEffect(() => {
    if (count == 59) {
      timer = setInterval(() => setCount((t) => t - 1), 1000);
    } else if (count <= 0) {
      clearInterval(timer);
    }
  }, [count]);
  // 滑动后的回调
  const onSuccess = async () => {
    const { data, code } = await getCaptchaToken({ mobile: form.getFieldValue('phone') });
    if (code == '100200') {
      setPhoneToken(data);
    } else {
      verify.current.reset();
      setPhoneToken();
    }
  };
  const hanldeCaptcha = async () => {
    const { code } = await getCaptcha({ mobile: phone, token: phoneToken });
    if (code == '100200') {
      setIndex(1);
    }
  };
  return (
    <Modal
      className="phone_verify"
      maskClosable={false}
      footer={false}
      width={480}
      closable={false}
      open={visible}
      destroyOnClose
    >
      <div style={{ fontWeight: 'bold', fontSize: 32, marginBottom: 24 }}>
        {intl.formatMessage({ id: 'login.phone.verfy' })}
      </div>
      <Form
        form={form}
        onFinish={async (values: { captcha: string }) => {
          const { captcha } = values;
          if (index == 0) {
            if (!phoneToken) {
              message.error(intl.formatMessage({ id: 'login.phone.tips' }));
            } else {
              hanldeCaptcha();
            }
          } else {
            const { code, message: msg } = await addMobileAuth({ mobile: phone, captcha });
            if (code == '100200') {
              message.success(msg);
              handleOk();
            }
          }
        }}
        labelCol={{ span: 0 }}
        name="phone_form"
      >
        {index === 0 && (
          <>
            <Form.Item
              label={intl.formatMessage({ id: 'login.phone.input' })}
              rules={[{ required: true }, { ...numberPattern }]}
              name="phone"
            >
              <Input
                prefix={<img src={tel} width={14} style={{ marginRight: 5 }} />}
                variant="filled"
                style={{ height: 50 }}
                placeholder={intl.formatMessage({ id: 'login.phone.input' })}
              />
            </Form.Item>
            <ReactSimpleVerify
              tips={intl.formatMessage({ id: 'login.phone.tips' })}
              ref={verify}
              width={400}
              movedColor="#8BC782"
              successTips={intl.formatMessage({ id: 'login.phone.suc' })}
              success={debounce(onSuccess, 400)}
            />
          </>
        )}
        {index === 1 && (
          <>
            <Space size={4} style={{ marginBottom: 32 }}>
              {intl.formatMessage({ id: 'login.phone.to' })}
              <span style={{ color: '#8BC782' }}>{phoneFormatter(phone)}</span>
              {intl.formatMessage({ id: 'login.phone.time' })}
            </Space>
            <Form.Item
              label={intl.formatMessage({ id: 'login.phone.code' })}
              rules={[{ required: true }]}
              name="captcha"
            >
              <Input.OTP
                variant="filled"
                style={{ width: '100%' }}
                placeholder={intl.formatMessage({ id: 'login.phone.code' })}
              />
            </Form.Item>
            <Col style={{ textAlign: 'center' }}>
              {count == 0 ? (
                <Col
                  onClick={() => {
                    hanldeCaptcha();
                    setCount(59);
                  }}
                  style={{ fontSize: 16, color: '#8BC782', cursor: 'pointer' }}
                >
                  {intl.formatMessage({ id: 'login.phone.send' })}
                </Col>
              ) : (
                <Col style={{ fontSize: 16 }}>
                  <span style={{ color: '#8BC782', marginRight: 4 }}>
                    {count}
                    {intl.formatMessage({ id: 'login.phone.second' })}
                  </span>
                  <span style={{ color: '#666' }}>
                    {intl.formatMessage({ id: 'login.phone.long' })}
                  </span>
                </Col>
              )}
            </Col>
          </>
        )}
        <Form.Item>
          <Button
            style={{
              height: 60,
              marginTop: 32,
            }}
            type="primary"
            block
            htmlType="submit"
          >
            {intl.formatMessage({ id: index == 1 ? 'login.phone.suc' : 'home.next' })}
          </Button>
        </Form.Item>
      </Form>
      <div
        style={{ color: '#8BC782', cursor: 'pointer', marginBottom: -10 }}
        onClick={() => {
          setCodeModalvisible(true);
        }}
      >
        {intl.formatMessage({ id: 'login.get_number' })}
      </div>
      {/* 验证码弹窗 */}
      <CodeModal
        visible={codeModalvisible}
        handleCancel={() => {
          setCodeModalvisible(false);
        }}
      />
    </Modal>
  );
};

export default PhoneVerifyModal;
